<template>
  <div>

      <div>
        <a @click="handleDetail('detele')">详情</a>
        <Authc permissions="trade:merchant:rule:edit">
          <a style="margin: 0 4px;" v-if="isDisable" @click="handleDetail('cancel')">作废</a>
        </Authc>
      </div>

  </div>
</template>
<script>
  import {
    Icon,
    Tooltip,
    Message,
    Modal
  } from "view-design";
  import { namespace } from "../../module/institutional";
  import Authc from "@/components/Authc";

  export default {
    props: {
      row: Object
    },
    model: {
      event: ["onEdit"]
    },
    components: {
      Icon,
      Tooltip,
      Message,
      Authc
    },
    data: function() {
      return {
        isDisable: true
      };
    },
    created () {
      if (this.$props.row.settlementStatus == '3') {
        this.isDisable = false;
      }else{
            this.isDisable = true;
          }
    },
    methods: {
      handleDetail(type) {
        let id = this.$props.row.id;
        switch (type) {
          case 'detele':
            this.$bus.$emit('actionType', {type: 'edit', id: id });
            break
          case 'cancel':
            this.$bus.$emit('actionType', {type: 'delete', id: id });
            break
        }
      }
    },
     watch:{
      row: {
            handler: function(newVal, oldVal) {
                if (newVal.settlementStatus == '3') {
        this.isDisable = false;
          }else{
            this.isDisable = true;
          }
            },
            deep: true,
            immediate: true
        },
    }
  };
</script>
<style lang="less">
  .normal-icon-style {
    font-size: 20px !important;
    color: #57a3f3 !important;
  }

  .error-icon-style {
    font-size: 20px !important;
    color: #ff0000 !important;
  }
</style>
